@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}

@mixin translate($left: -50%, $top: -50%) {
  transform: translate($left, $top);
}

@mixin translateX($left: 0) {
  transform: translateX($left);
}

@mixin translateY($top: 0) {
  transform: translateY($top);
}

@mixin middle-center($position: absolute) {
  position: $position;
  left: 50%;
  top: 50%;
  @include translate(-50%, -50%);
}

@mixin middle-center-x($position: absolute) {
  position: $position;
  left: 50%;
  @include translateX(-50%);
}

@mixin middle-center-y($position: absolute) {
  position: $position;
  top: 50%;
  @include translateY(-50%);
}

@mixin multi-ellipsis($line-number: 2) {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-number;
}

@mixin background-image($url: '//asset.watsons.com.cn/lib/placeholder-square.png') {
  background: url($url) center no-repeat;
  background-size: contain;
}
@mixin border-radius($radius: 1, $borderColor: colors(gray)) {
  border: 1px solid $borderColor;
  border-radius: rpx($radius);
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    position: relative;
    border: 0;
    &::before {
      content: "";
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid $borderColor;
      transform: scale(0.5);
      transform-origin: 0 0;
      padding: 1px;
      box-sizing: border-box;
      border-radius: rpx($radius * 2);
      pointer-events: none;
      background-clip: padding-box;
    }
  }
}

// -------------------------
// function and mixin
// -------------------------

@function rpx($px) {
    @if unit($px) == '%' {// 输入 百分比值 不转换
        @return $px;
    }

    @if unit($px) == 'px' {
      $px: $px / 1px * 1rpx;
    }

    @if unitless($px) {
      $px: $px * 1rpx;
    }

    @return $px;
}


// 单行内容 文字垂直居中
@mixin oneLine($h: 30px, $center: false) {
    $h: rpx($h);
    height: $h;
    line-height: $h;
    @if $center {
        text-align: center;
    }
}

// 伪元素实现1px边框
@mixin border1px($side: bottom) {
    content: "";
    position: absolute;
    #{$side}: 0;
    @if $side == bottom {
      left: 0;
      right: 0;
    }
    @if $side == right {
      top: 0;
      bottom: 0;
    }
    border-#{$side}: 1px solid #dad8d8;
    transform: scale#{if($side == bottom, Y, X)}#{unquote('(' + 0.5 + ')')};
}

// 块级元素水平居中
@mixin blockCenter($px: auto) {
    @if type-of($px) == 'number' {
        @if unit($px) == 'px' {
            $px: rpx($px);
        }
    }

    margin-left: $px;
    margin-right: $px;
}

// 元素宽高
@mixin size($w: false, $h: false, $minW: false, $minH: false, $maxW: false, $maxH: false) {
    @if $w    {width: rpx($w);}
    @if $h    {height: rpx($h);}
    @if $minW {min-width: rpx($minW);}
    @if $minH {min-height: rpx($minH);}
    @if $maxW {max-width: rpx($maxW);}
    @if $maxH {max-height: rpx($maxH);}
}


// margin
@mixin margin($t: false, $r: false, $b: false, $l: false) {
    @if $t {margin-top: rpx($t);}
    @if $r {margin-right: rpx($r);}
    @if $b {margin-bottom: rpx($b);}
    @if $l {margin-left: rpx($l);}
}

// padding
@mixin padding($t: false, $r: false, $b: false, $l: false) {
    @if $t {padding-top: rpx($t);}
    @if $r {padding-right: rpx($r);}
    @if $b {padding-bottom: rpx($b);}
    @if $l {padding-left: rpx($l);}
}

@mixin position($p: absolute, $l: false, $t: false, $r: false, $b: false) {
    position: $p;
    @if $t {top: rpx($t);}
    @if $r {right: rpx($r);}
    @if $b {bottom: rpx($b);}
    @if $l {left: rpx($l);}   
}

// 居中定位
@mixin center($isH: true, $isV: false) {
    position: absolute;

    @if $isH {
        left: 50%;
        @if $isV {
            transform: translateX(-50%) translateY(-50%);
        } @else {
            transform: translateX(-50%);
        }
    }

    @if $isV {
        top: 50%;
        @if $isH {
            transform: translateX(-50%) translateY(-50%);
        } @else {
            transform: translateY(-50%);
        }

    }
}
// 文本溢出显示省略号..
@mixin textOverEffect() {
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
}

@mixin webkitLineClamp($n, $height: false) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $n;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    @if $height {
        height: rpx($height);
    }
}

@mixin itemgroupSaleoutMask($maskWidth, $ratio: 0.9, $fsize: 28px) {
    .saleout-mask {
        box-sizing: content-box;
        width: $maskWidth;
        @include oneLine($maskWidth, true);
        @include center(true, true);
        z-index: 100;
        border-radius: 50%;
        background: rgba(0, 0, 0, .4);
        color: #f2f2f2;
        font-size: rpx($fsize);

        $maskInnerWidth: $maskWidth * $ratio;
        &:after{
          content: '';
          @include center(true, true);
          @include size($maskInnerWidth, $maskInnerWidth);
          border: 1px dashed #fff;
          border-radius: 50%;
        };
      }
}
